<template>
  <div>
    <div @click="onSwitch">切换</div>
    <div class="line" v-if="show">
      username:<input v-model="username" />
    </div>

    <div class="line" v-else>
      password:<input v-model="password" />
    </div>

    <div class="box">
      <div class="wrap"></div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      show:false,
      username:'',
      password:'',
    }
  },
  methods:{
    onSwitch(){
      this.show = !this.show
      console.log('')
      console.log('username:',this.username)
      console.log('password:',this.password)
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  width:100px; height:100px;
  border:1px solid red;
  .wrap{
    width:100%; height:100%;
    background:green;
    transform:translateX(0px);
  }
  
}
</style>
